<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	session.setAttribute("basePath", basePath);
	request.setAttribute("cacheTimestamp", "?time="
			+ Calendar.getInstance().getTimeInMillis());
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="${basePath }">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>西普茗茶商品</title>
<meta name="renderer" content="webkit">

<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://cdn.bootcss.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="https://cdn.bootcss.com/Swiper/3.0.8/css/swiper.min.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css" />
<link href="assets/css/themes/light.css" rel="stylesheet" type="text/css" id="style_color" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />

<script type="text/javascript">
	var isHTML5 = true;
</script>
<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script type="text/javascript">
		isHTML5 = false;
	</script>
<![endif]-->
<style type="text/css">
body {
	background: url("images/home_bg.jpg") top repeat;
}

.header {
	background: transparent !important;
}

#home_swiper {
	background-image: url("images/loading.gif");
	background-repeat: no-repeat;
	background-position: center;
}
</style>
</head>
<!--/head-->
<!-- BEGIN BODY -->
<body class="page-footer-fixed">
	<!-- BEGIN HEADER -->
	<div class="header navbar">
		<div class="container">
			<div class="row margin-top-10">
				<div class="col-xs-2 text-center"></div>
				<div class="col-xs-8 text-center">
					<a href="wxmenu/aboutus.html">
						<img src="images/qianhui_logo.png" class="img-responsive center-block" alt="西普茗茶商品LOGO">
					</a>
				</div>
				<div class="col-xs-2 text-center"></div>
			</div>
		</div>
		<!-- BEGIN TOP NAVIGATION BAR -->
		<div class="container">
			<div class="input-group margin-top-10 margin-bottom-10">
				<span class="input-group-btn"> <a href="goods_type/get_shop_goods_type" class="btn gold" type="button" style="padding: 2px 10px !important; background: #b5b4b4 !important;">
						<!-- <i class="fa fa-list-ul"></i> -->
						<img alt="" src="images/small_logo.png" height="30px">
					</a>
				</span>
				<input id="search_input" type="text" class="form-control" style="border: 1px solid #cea047;" placeholder="搜索仟滙商品，欢迎选购！">
				<span class="input-group-btn">
					<button class="btn gold" type="button" id="search_submit_button">
						<!-- <i class="fa fa-search"></i> -->
						搜本店
					</button>
				</span>
			</div>
		</div>

		<!-- END TOP NAVIGATION BAR -->
	</div>
	<!-- END HEADER -->
	<div class="clearfix "></div>
	<!-- BEGIN CONTAINER -->
	<div class="page-container">
		<!-- 首页banner开始 -->
		<div class="swiper-container bg-white" id="home_swiper">
			<div class="swiper-wrapper">
				<c:if test="${m_h1_advertisementList!=null }">
					<c:forEach items="${m_h1_advertisementList }" var="a" varStatus="aStat">
						<div class="swiper-slide">
							<a target="_blank" href="${a.advertisementLink }">
								<img class="img-responsive center-block swiper-lazy" data-src="${a.advertisementPicture }" data-real-src="${a.advertisementPicture }">
							</a>
						</div>
					</c:forEach>
				</c:if>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<!-- 首页banner结束 -->

		<div class="container">
			<div class="row margin-top-5">
				<div class="col-xs-5 text-center" style="z-index: 100 !important;">
					<a href="wxmenu/aboutus.html">
						<img class="center-block" src="images/logo_text.png" height="50px">
					</a>
				</div>
				<div class="col-xs-4 text-center"></div>
				<div class="col-xs-3 text-center">
					<i id="wx_kf_2" style="font-size: 50px; color: #cea047;" class="iconfont icon-qh-contact-2">&#xe620;</i>
				</div>
			</div>
		</div>

		<div class="clearfix"></div>
		<div class="container margin-top-10" style="background: #ffebbb !important; padding-top: 10px; padding-bottom: 10px;">
			<div class="row margin-top-5">
				<div class="col-xs-3 text-center" style="border-right: 1px #d4a86b solid;">
					<a href="javascript:void(0)" id="go_to_show_all_goods">
						<div style="background: #cfe07d; padding: 5px; display: inline-block; border-radius: 5px !important;">
							<i style="font-size: 26px; color: white;" class="iconfont icon-qh-all-goods">&#xe622;</i>
						</div>
					</a>
					<div class="clearfix"></div>
					<div class="margin-top-5 text-gold">全部商品</div>
				</div>
				<div class="col-xs-3 text-center" style="border-right: 1px #d4a86b solid;">
					<a href="goods_type/get_shop_goods_type">
						<div style="background: #8bdec6; padding: 5px; display: inline-block; border-radius: 5px !important;">
							<i style="font-size: 26px; color: white;" class="iconfont icon-qh-type">&#xe623;</i>
						</div>
					</a>
					<div class="clearfix"></div>
					<div class="margin-top-5 text-gold">商品分类</div>
				</div>
				<div class="col-xs-3 text-center" style="border-right: 1px #d4a86b solid;">
					<a href="show_promotion_list">
						<div style="background: #f7cdd9; padding: 5px; display: inline-block; border-radius: 5px !important;">
							<i style="font-size: 26px; color: white;" class="iconfont icon-qh-collect-2">&#xe625;</i>
						</div>
					</a>
					<div class="clearfix"></div>
					<div class="margin-top-5 text-gold">促销活动</div>
				</div>
				<div class="col-xs-3 text-center">
					<a href="show_collection_list">
						<div style="background: #f3cba9; padding: 5px; display: inline-block; border-radius: 5px !important;">
							<i style="font-size: 26px; color: white;" class="iconfont icon-qh-sales">&#xe624;</i>
						</div>
					</a>
					<div class="clearfix"></div>
					<div class="margin-top-5 text-gold">我的收藏</div>
				</div>
			</div>
		</div>
	</div>

	<div class="clearfix"></div>
	<div class="container padding-top-5 padding-bottom-5">
		<div class="row">
			<c:if test="${m_h2_advertisementList!=null }">
				<c:forEach items="${m_h2_advertisementList }" var="a" varStatus="aStat">
					<div class="col-xs-3 text-center">
						<a href="${a.advertisementLink }">
							<%-- <img alt="" class="img-responsive center-block" src="${a.advertisementPicture }"> --%>
							<img data-original="${a.advertisementPicture }" class="img-responsive center-block lazy lazy_load_img">
						</a>
					</div>
				</c:forEach>
			</c:if>
		</div>
	</div>

	<div id="all_goods_show_div"></div>

	<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper">
		<div class="page-content" style="background: transparent !important;">
			<c:forEach items="${viewAndList }" var="val_1">
				<div class="clearfix"></div>
				<div class="container">
					<div class="input-group input-group-lg margin-top-10 margin-bottom-10">
						<span class="input-group-btn"> <a href="goods_type/get_shop_goods_type" class="btn gold" type="button"
								style="border: none; margin: 0px; padding: 2px 10px !important; background: url('images/type_one_bg_left.png') no-repeat !important;"> </a>
						</span>
						<input type="text" readonly="readonly" class="form-control" value="${val_1.view.name }"
							style="border: none; background: url('images/type_one_bg_center.png') repeat-x !important; font-size: 16px; font-weight: bold; color: white; text-shadow: black 0px 0px 0px;">
						<span class="input-group-btn">
							<button class="btn gold" type="button"
								style="border: none; margin: 0px; padding: 2px 10px !important; background: url('images/type_one_bg_right.png') right no-repeat !important; font-size: 12px; color: white; text-shadow: black 0px 1px 1px;">
								<a class="text-white" href="spitems?tid=${val_1.view.childrenIds }">
									更多 MORE <i class="fa fa-angle-right"></i>
								</a>
							</button>
						</span>
					</div>
				</div>
				<c:forEach items="${val_1.list }" var="val_2" varStatus="val_2_stat">
					<c:if test="${fn:length(goodsTypeAndGoodsListMap[val_2.view.id])>0 }">
						<div class="container">
							<div class="row margin-top-0 padding-left-5 padding-right-5">
								<c:forEach items="${goodsTypeAndGoodsListMap[val_2.view.id] }" var="g" varStatus="g_stat">
									<div class="col-xs-6">
										<div class="thumbnail margin-left-1 margin-right-1 margin-bottom-10" style="border: 1px solid #f8f8f8 !important; box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1); border-radius: 5px !important;">

											<a href="item/${g.goodsId }">
												<img data-original="${g.goodsMainPic }" class="lazy img-responsive center-block lazy_load_img">
											</a>
											<div class="caption" style="border-top: 2px solid #ede6d9; padding-top: 5px;">
												<p style="height: 2.8em; overflow: hidden; text-overflow: ellipsis;">${g.goodsName }</p>
												<p class="margin-bottom-0">
													<c:if test="${g.goodsOriginalPrice!=null }">
														<del class="margin-right-5">
															<span class="text-light"><i class="fa fa-rmb"></i> <fmt:formatNumber value="${g.goodsOriginalPrice}" type="currency" pattern="#,##0.##" /></span>
														</del>
													</c:if>
													<strong><span class="text-red"><i class="fa fa-rmb"></i> <fmt:formatNumber value="${g.goodsPrice}" type="currency" pattern="#,##0.##" /></span></strong>
													<c:if test="${g.goodsDiscount!=null&&g.goodsDiscount>0&&g.goodsDiscount<1 }">
														<span class="label label-sm label-danger"><fmt:formatNumber value="${g.goodsDiscount*10 }" pattern="#,##0.##" />折</span>
													</c:if>
												</p>
											</div>
											<div class="row margin-top-5">
												<div class="col-xs-12 ">
													<a href="item/${g.goodsId }" class="pull-right margin-right-10 margin-bottom-10">
														<img alt="" src="images/buy_right_now_pic.png" style="height: 22px !important;">
													</a>
												</div>
											</div>

										</div>
									</div>
									<c:if test="${g_stat.count%2==0 }">
										<div class="clearfix"></div>
									</c:if>
								</c:forEach>
							</div>
						</div>
					</c:if>
				</c:forEach>
				<a class="text-white" href="spitems?tid=${val_1.view.childrenIds }">
					<img style="margin-top: -10px;" width="90px" class="pull-right" src="images/home_goods_more.png">
				</a>
			</c:forEach>

			<div class="clearfix"></div>
			<div style="height: 50px;"></div>
		</div>
	</div>
	<!-- END CONTENT -->

	</div>
	<!-- END CONTAINER -->
	<!-- BEGIN FOOTER -->
	<div class="footer">
		<div class="container">
			<div class="row">
				<div class="col-xs-3 text-center">
					<a href="./" class="icon-btn">
						<!-- <i class="fa fa-home text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-logo">&#xe626;</i>
						<div class="text-gold margin-top-2">首页</div>

					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="goods_type/get_shop_goods_type" class="icon-btn">
						<!-- <i class="fa fa-list-ul text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold con-qh-all-goods">&#xe622;</i>
						<div class="text-gold margin-top-2">类型</div>
					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="cart" class="icon-btn">
						<!-- <i class="fa fa-shopping-cart text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-cart">&#xe61b;</i>
						<div class="text-gold margin-top-2">购物车</div>

						<span class="badge badge-important" id="shooping_cart_icon_number"></span>
					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="item/infocenter.jsp" class="icon-btn">
						<!-- <i class="fa fa-user text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-infocenter">&#xe61d;</i>
						<div class="text-gold margin-top-2">个人中心</div>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- END FOOTER -->
	<!-- BEGIN levitation button -->
	<!-- /btn-group -->
	<div class="btn-group btn-group-vertical dropup right_bottom_levitation_div">

		<button type="button" class="btn btn-lg dropdown-toggle shotcut-gray" data-toggle="dropdown" style="padding: 8px; border-radius: 5px !important;">
			<!-- <i class="fa fa-ellipsis-h"></i> -->
			<i style="font-size: 22px;" class="iconfont icon-qh-more">&#xe61e;</i>
		</button>
		<ul class="dropdown-menu pull-right padding-top-5 padding-bottom-2" role="menu">
			<li>
				<a href="./">
					<!-- <i class="fa fa-home text-gold"></i> -->
					<i style="font-size: 18px;" class="iconfont icon-qh-home text-gold">&#xe61a;</i> 店铺首页
				</a>
			</li>
			<li class="divider" style="width: 80%; margin: 2px auto;"></li>
			<li>
				<a href="goods_type/get_shop_goods_type">
					<!-- <i class="fa fa-search text-gold"></i> -->
					<i style="font-size: 18px;" class="iconfont icon-qh-search text-gold">&#xe62f;</i> 搜索
				</a>
			</li>
			<li class="divider" style="width: 80%; margin: 2px auto;"></li>
			<li>
				<a href="show_collection_list">
					<!-- <i class="fa fa-star-o text-gold"></i> -->
					<i style="font-size: 18px;" class="iconfont icon-qh-collect text-gold">&#xe61c;</i> 我的收藏
				</a>
			</li>
			<li class="divider" style="width: 80%; margin: 2px auto;"></li>
			<li>
				<a href="show_browser_history_list">
					<!-- <i class="fa fa-clock-o text-gold"></i> -->
					<i style="font-size: 18px;" class="iconfont icon-qh-history text-gold">&#xe630;</i> 最近浏览
				</a>
			</li>
		</ul>
		<button id="wx_kf" type="button" class="btn btn-lg shotcut-gray margin-top-5" style="padding: 8px; border-radius: 5px !important;">
			<i style="font-size: 22px;" class="iconfont icon-qh-kf">&#xe62c;</i>
		</button>
		<button id="click_to_top" type="button" class="btn btn-lg shotcut-gray margin-top-5" style="padding: 8px; border-radius: 5px !important;">
			<!-- <i class="fa fa-chevron-up"></i> -->
			<i style="font-size: 22px;" class="iconfont icon-qh-top">&#xe619;</i>
		</button>
	</div>
	<!-- /btn-group -->
	<!-- END levitation button -->
	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/jquery-migrate/1.2.1/jquery-migrate.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.0.8/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<!-- END PAGE LEVEL SCRIPTS -->

	<script>
		$(function()
		{
			$("#search_input").keydown(function(event)
			{
				if (event.keyCode == 13)
				{
					$("#search_submit_button").trigger("click");
				}
			});
			$("#search_submit_button").click(function()
			{
				var k = $("#search_input").val();
				var orderby = "";
				if ($("#order_by_div a.blue").length > 0)
				{
					orderby = $("#order_by_div a.blue").attr("data-orderby");
				}
				else if ($("#order_by_div a").length > 0)
				{
					orderby = $("#order_by_div a").attr("data-orderby");
				}
				if (k.length > 0)
				{
					window.location.href = "${basePath}spsearch?k=" + k + "&orderby=" + orderby;
				}
			});

			//返回顶部
			$("#click_to_top").click(function()
			{
				$('html,body').animate(
				{
					scrollTop : 0
				}, 'slow');
			});

			//滚动到全部商品
			$("#go_to_show_all_goods").click(function()
			{
				$('html,body').animate(
				{
					scrollTop : $("#all_goods_show_div").offset().top
				}, 'slow');
			});

			$.post("wc_get_wechat_info",
			{
				"currentUrl" : location.href.split('#')[0]
			}, function(json)
			{
				wx.config(
				{
					debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId : json.appId, // 必填，公众号的唯一标识
					timestamp : json.timestamp, // 必填，生成签名的时间戳
					nonceStr : json.nonceStr, // 必填，生成签名的随机串
					signature : json.signature,// 必填，签名，见附录1
					jsApiList : [ 'onMenuShareTimeline', 'chooseWXPay' ]
				// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				wx.ready(function()
				{
					$("#wx_kf,#wx_kf_2").click(function()
					{
						$.post("u_wx_create_customservice_do", {}, function(return_json)
						{
							if (return_json.success == true)
							{
								wx.closeWindow();
							}
						},
						//返回类型
						"json");
					});
				});
				wx.error(function(res)
				{
				});
				if ("${buyerSession.buyerId}".length <= 0)
				{
					var code = "${param.code}";
					if (code.length > 0)
					{
						$.post("wc_get_user_info",
						{
							'code' : code
						}, function(return_json)
						{
							if (return_json.success == true)
							{
								//alert("openid(getUserInfo):" + return_json.openid);
								window.location.href = "${basePath}";
							}
						},
						//返回类型
						"json");
					}
					else
					{
						$.post("wc_valid_have_this_person", {}, function(valid_json)
						{
							if (valid_json.success == false)
							{

								var authUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";

								authUrl = authUrl.replace("APPID", json.appId);
								authUrl = authUrl.replace("REDIRECT_URI", location.href.split('#')[0]);
								authUrl = authUrl.replace("SCOPE", "snsapi_base");
								authUrl = authUrl.replace("STATE", 1);
								window.location.href = authUrl;
							}
							else
							{
								//alert("openid(validHaveThisPerson):" + valid_json.openid);
							}
						},
						//返回类型
						"json");
					}
				}
			},
			//返回类型
			"json");

			var mySwiper = new Swiper('.swiper-container',
			{
				direction : 'horizontal',
				loop : true,
				// 如果需要分页器
				pagination : '.swiper-pagination',
				lazyLoading : true,
				autoplay : 6000
			});

			$(".lazy_load_img").lazyload(
			{
				placeholder : "images/default_light_goods_pic.jpg",
				effect : "fadeIn",
				threshold : 600
			});

			String.prototype.startWith = function(str)
			{
				var reg = new RegExp("^" + str);
				return reg.test(this);
			}

			String.prototype.endWith = function(str)
			{
				var reg = new RegExp(str + "$");
				return reg.test(this);
			}

			//设置购物车购物数量
			if ($("#shooping_cart_icon_number").length > 0)
			{
				$.post('u_get_shoppingcar_number', {}, function(json)
				{
					if (json.success == true)
					{
						$("#shooping_cart_icon_number").fadeOut(100, function()
						{
							if (json.numberchange < 100)
							{
								$("#shooping_cart_icon_number").html(json.numberchange).fadeIn(100);
							}
							else
							{
								$("#shooping_cart_icon_number").html("99+").fadeIn(100);
							}
						});
					}
				},
				//返回类型
				"json");
			}
		});
	</script>
	<!-- END JAVASCRIPTS -->
</body>
</html>